<template>
  <!-- 竞拍报名 -->
  <div class="signUp_styl" v-if="modalShow">
    <Modal ref="modalEle" v-model="modalShow" width="500" class="modal-styl" :mask-closable="false">
      <p slot="header" style="text-align: center">
        <span>竞拍信息填写</span>
      </p>
      <Form ref="formEle" :model="addFather" :rules="ruleValidate" :label-width="120">
        <FormItem label="手机号码" prop="carNumber">
          <Input v-model="addFather.carNumber" placeholder="请输入手机号码"></Input>
        </FormItem>
        <FormItem label="业务经理" prop="ywId">
          <Select v-model="addFather.ywId" placeholder="请选择业务经理" label-in-value @on-change="changeFun($event,'ywy')">
            <Option v-for="item in managerList" :value="item.id" :key="item.id">{{ item.name }}</Option>
          </Select>
        </FormItem>
        <FormItem label="保证金缴纳方" prop="jnCode">
          <Select v-model="addFather.jnCode" placeholder="请选择保证金缴纳方" label-in-value @on-change="changeFun($event,'company')">
            <Option v-for="item in companyList" :value="item.orgCode" :key="item.orgCode">{{ item.orgName }}</Option>
          </Select>
        </FormItem>
      </Form>
      <div slot="footer">
        <Button type="text" @click="modalShow = false">取消</Button>
        <Button :loading="btnLoading" type="primary" @click="submitFun">保存</Button>
      </div>
    </Modal>
  </div>
</template>
  
  <script>
import { validatePhone } from "@/tool/myValidator";
import { myMixins } from "@/mixins/base.js";

export default {
  components: {},
  mixins: [myMixins],
  data() {
    return {
      companyList: [],
      managerList: [],
      ruleValidate: {
        carNumber: [{ required: true, validator: validatePhone }],
        ywId: [
          {
            required: true,
            message: "请选择业务经理",
            type: "string",
            trigger: "change"
          }
        ],
        jnCode: [
          {
            required: true,
            message: "请选择保证金缴纳方",
            type: "string",
            trigger: "change"
          }
        ]
      },
      addFather: {
       
      },
      btnLoading: false,
      modalShow: false
    };
  },
  mounted() {},
  methods: {
    openFun(rowData) {
      this.addFather = {
        carNumber:this.$store.getters.store_userInfo.loginPhone,
        ywId:this.$store.getters.store_userInfo.salesmanId
      };
      this.rowData = rowData;
      this.MX_companyList();
      this.MX_managerList();
      this.modalShow = true;
    },
    // select选择change
    changeFun(val, flag) {
      if (flag == "ywy") {
        this.addFather.ywName = val.label;
      } else {
        this.addFather.jnName = val.label;
      }
    },
    // 报名
    submitFun() {
      this.$refs.formEle.validate((valid) => {
        if (valid) {
          this.btnLoading = true;
          let data = {
            id: this.rowData.id,
            ...this.addFather
          };
          this.httpPost(this.API.API_activitySignup, data)
            .then((res) => {
              this.$Message.success("报名成功!");
              this.btnLoading = false;
              this.modalShow = false;
              this.$emit("ok");
            })
            .catch((err) => {
              this.btnLoading = false;
              console.log("接口报错：", err);
            });
        } else {
          this.buttonLoading = false;
          this.$Message.error("请输入必填信息!");
        }
      });
    }
  }
};
</script>
  <style lang="less" scoped>
@import "~@/assets/styles/main.less";
@deep: ~">>>";

::v-deep .ivu-modal-header {
  background-image: url("~@/assets/images/modal_back500.png") !important;
}
.signUp_styl {
  width: 100%;
}
.modal_styl {
  position: relative;
  padding-bottom: 50px;
}
.ivu-modal-content {
  border-radius: 12px;
}
/deep/.ivu-modal-body {
  padding: 20px 40px;
}
</style>
  